<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="importmap">
    {
      "imports": {
        "react": "https://esm.sh/react?dev",
        "react-dom/client": "https://esm.sh/react-dom/client?dev"
      }
    }
  </script>
</head>

<body>
  <div id="root"></div>
  <!-- When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- ES Module Shims started out as a way to use new native modules features on the web (like import maps) before they were released in browsers, in a way that could be suitable for fast development or simple production workflows. -->
  <script async src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"></script>

  <!-- type="text/babel" jsx 不能直接应用于浏览器 -->
  <!-- If you want to use your browser's native support for ES Modules, you'd normally need to set a type="module" attribute on your script tag. With @babel/standalone, set a data-type="module" attribute instead -->
  <script type="text/babel" data-type="module">
    import React, { StrictMode } from 'react'
    import { createRoot } from 'react-dom/client'
    import { useState } from 'react'

    function MyButton() {
      const [count, setCount] = useState(0)
      function handleClick() {
        setCount(count + 1)
      }
      return (
        <button onClick={ handleClick } >
          react 按钮组件 {count}
        </button>
      )
    }

    let App = function MyApp() {
      return (
        <div>
          <h1>欢迎来到 React Demo！</h1>
          <MyButton />
          <MyButton />
          <MyButton />
        </div>
      )
    }


    const root = createRoot(document.getElementById('root'))
    root.render(
      <StrictMode>
        <App />
      </StrictMode>
    )
  </script>
</body>

</html>